<template>
  <view class="forgot-container">
    <!-- 标题 -->
    <view class="forgot-title">找回密码</view>
    <view class="forgot-subtitle">请输入您的用户名</view>
    
    <!-- 用户名输入 -->
    <view class="input-group">
      <input 
        v-model="username" 
        placeholder="请输入用户名" 
        class="input-box"
        :class="{'input-error': error}"
        @blur="checkUsername"
      />
      <view v-if="error" class="error-message">{{ error }}</view>
      <view v-if="checking" class="checking-message">检查中...</view>
      <view v-if="usernameAvailable === false" class="error-message">用户名不存在</view>
    </view>
    
    <!-- 找回按钮 -->
    <button 
      @click="retrievePassword"
      class="retrieve-btn"
      :disabled="loading || usernameAvailable !== true"
    >
      {{ loading ? '处理中...' : '找回密码' }}
    </button>
    
    <!-- 结果显示 -->
    <view v-if="result" class="result-container">
      <view class="result-title">找回结果：</view>
      <view class="result-item">
        <text class="result-label">用户名：</text>
        <text class="result-value">{{ result.username }}</text>
      </view>
      <view class="result-item">
        <text class="result-label">密码：</text>
        <text class="result-value">{{ result.password }}</text>
      </view>
    </view>
    
    <!-- 返回登录 -->
    <view class="back-login" @click="goToLogin">
      想起密码了？<text class="login-text">立即登录</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const BASE_URL = 'http://10.50.14.34:8080'

const username = ref('')
const error = ref('')
const checking = ref(false)
const usernameAvailable = ref(null)
const loading = ref(false)
const result = ref(null)

// 检查用户名是否存在
const checkUsername = async () => {
  if (!username.value.trim()) {
    error.value = '请输入用户名'
    usernameAvailable.value = null
    return
  }
  
  checking.value = true
  error.value = ''
  
  try {
    const res = await uni.request({
      url: `HTTP://192.168.153.1:8080/users/seek`,
      method: 'POST',
      data: {
        username: username.value
      }
    })
    
    // uni-app请求返回格式处理
    const response = Array.isArray(res) ? res[1]?.data : res?.data
    
    if (response && response.code === 200200) {
      usernameAvailable.value = response.exists
      if (!response.exists) {
        error.value = '用户名不存在'
      }
    } else {
      error.value = response?.message || '检查用户名失败'
    }
  } catch (err) {
    console.error('检查用户名失败:', err)
    error.value = '网络错误，请重试'
  } finally {
    checking.value = false
  }
}

// 找回密码
const retrievePassword = async () => {
  if (!username.value.trim()) {
    error.value = '请输入用户名'
    return
  }
  
  loading.value = true
  error.value = ''
  
  try {
    const res = await uni.request({
      url: `${BASE_URL}/user/retrieve-password`,
      method: 'GET',
      data: {
        username: username.value
      }
    })
    
    // uni-app请求返回格式处理
    const response = Array.isArray(res) ? res[1]?.data : res?.data
    
    if (response) {
      if (response.code === 200) {
        result.value = {
          username: response.username,
          password: response.password
        }
      } else {
        error.value = response.message || '找回密码失败'
      }
    } else {
      error.value = '请求失败，请重试'
    }
  } catch (err) {
    console.error('找回密码失败:', err)
    error.value = '网络错误，请重试'
  } finally {
    loading.value = false
  }
}

// 跳转到登录页面
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  })
}
</script>

<style>
.forgot-container {
  padding: 40rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.forgot-title {
  font-size: 48rpx;
  font-weight: bold;
  text-align: center;
  margin: 60rpx 0 20rpx;
  color: #333;
}

.forgot-subtitle {
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 60rpx;
  color: #666;
}

.input-group {
  margin-bottom: 40rpx;
}

.input-box {
  height: 100rpx;
  border: 1rpx solid #e6e6e6;
  border-radius: 12rpx;
  padding: 0 30rpx;
  font-size: 30rpx;
  background-color: #fff;
}

.input-box:focus {
  border-color: #3a7afe;
}

.input-error {
  border-color: #f56c6c;
}

.error-message {
  color: #f56c6c;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.checking-message {
  color: #909399;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.retrieve-btn {
  height: 100rpx;
  line-height: 100rpx;
  background-color: #3a7afe;
  color: white;
  border-radius: 12rpx;
  font-size: 34rpx;
  margin: 40rpx 0;
}

.retrieve-btn[disabled] {
  opacity: 0.6;
}

.result-container {
  margin-top: 40rpx;
  padding: 30rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
}

.result-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.result-item {
  display: flex;
  margin-bottom: 15rpx;
  font-size: 28rpx;
}

.result-label {
  color: #666;
  width: 120rpx;
}

.result-value {
  color: #333;
  font-weight: 500;
}

.back-login {
  text-align: center;
  margin-top: 40rpx;
  font-size: 28rpx;
  color: #666;
}

.login-text {
  color: #3a7afe;
  margin-left: 10rpx;
}
</style>